﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Drag Drop Events with Custom Conditions</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.sampleRows = [];
				$scope.defaultIcon = "icons-medium empty-doc";

				$scope.sampleColumns = [
					{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 180 },
					{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 90 },
					{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 90 },
					{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 125 },
					{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 80 },
					{ id: 6, columnTitle: "Address", columnAlignment: "center", size: 200 },
					{ id: 7, columnTitle: "City", columnAlignment: "center" },
					{ id: 8, columnTitle: "Country", columnAlignment: "center" }

				];

				$scope.flatData = [
					{ 
						rowID: 1,
						icon: "icons-medium people",
						rowText: "Piccolo und mehr",
						cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]
					},
					{ 
						rowID: 11,
						parentID: 1,
						rowText: "Order #10259",
						cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]
					},
					{ 
						rowID: 12,
						parentID: 1,
						rowText: "Order #11094",
						cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]
					},
					{ 
						rowID: 2,
						icon: "icons-medium people",
						rowText: "Frankenversand",
						cells: [{ cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "München" }, { cid: 8, cellText: "Germany" }]
					},
					{ 
						rowID: 21,
						parentID: 2,
						rowText: "Order #11536",
						cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "85.53" }]
					},
					{ 
						rowID: 22,
						parentID: 2,
						rowText: "Order #14472",
						cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "112.30" }]
					},
					{ 
						rowID: 23,
						parentID: 2,
						rowText: "Order #17293",
						cells: [{ cid: 1, cellText: "17293" }, { cid: 2, cellText: "1/17/2015" }, { cid: 3, cellText: "2/12/2015" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "184.25" }]
					},
					{ 
						rowID: 24,
						parentID: 2,
						rowText: "Order #17318",
						cells: [{ cid: 1, cellText: "17318" }, { cid: 2, cellText: "1/29/2015" }, { cid: 3, cellText: "2/27/2015" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "99.37" }]
					},
					{ 
						rowID: 3,
						icon: "icons-medium people",
						rowText: "Laughing Bacchus Wine Cellars",
						cells: [{ cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]
					},
					{ 
						rowID: 31,
						parentID: 3,
						rowText: "Order #11495",
						cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "49.28" }]
					},
					{ 
						rowID: 32,
						parentID: 3,
						rowText: "Order #11517",
						cells: [{ cid: 1, cellText: "11517" }, { cid: 2, cellText: "9/2/2013" }, { cid: 3, cellText: "10/7/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "54.97" }]
					}
				];

				$scope.dataFields = {
					column: {
						headerText: 'columnTitle',
						headerAlignment: 'columnAlignment',
						contentAlignment: 'cellAlignment',
						width: 'size'
					},
					row: {
						id: 'rowID',
						pid: 'parentID',
						text: 'rowText'
					},
					cell: {
						text: 'cellText'
					}
				}

				var loadTimer = $timeout(function(){
					$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);

					$timeout.cancel(loadTimer);
				}, 1);

				var isRoot = function(row){
					return row ? row.parentID == undefined || row.parentID == '' : false;
				}

				$scope.onDragOver = function(e){
					// Check whether there is dragging and target row, in order to set our conditions
					if (e.dragRow && e.targetRow){
						// Prevent a root row to become a child of another root row, only allow reposition
						if (isRoot(e.dragRow) && isRoot(e.targetRow)){
							if (e.dropPos == 0)
								return false;
						}
						// Prevent dragged row to be dropped outside its parent row
						// In our example this means orders of one customer cannot move to another customer
						else if (e.dragRow.parentID != e.targetRow.parentID)
							return false;
						// Each row cannot become a child of target row
						// In our example this means orders cannot be placed inside another order
						else if (e.dropPos == 0 && e.dragRow.parentID == e.targetRow.parentID)
							return false;
					}
				}

				$scope.onDragDrop = function(e){
					// If dragged row is dropped over TreeGrid space, the drop operation is cancelled
					// In our example this means that orders cannot become placed as customers, meaning as root rows
					if (e.dropPos == -1 && e.dragRow && e.dragRow.parentID)
						return false;
				}
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.iui-drop-marker
		{
			font-size: 0.75em;
		}
		.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
		{
			padding: 1px 3px;
		}
		.iui-treegrid-row-cell-content
		{
			padding: 1px 3px;
		}

		/* Sample settings */
		.control-panel
		{
			width: 170px;
		}
		.feature-content
		{
			width: 850px;
		}
		.feature-list
		{
			width: 300px;
		}
        .directive
        {
        	border: thin solid #dadada;
        	width: 800px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Drag&amp;Drop Events with Custom Conditions</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" allow-drag="true" allow-drop="true" drag-over="onDragOver(e)" drag-drop="onDragDrop(e)" show-footer="false" ></iui-treegrid>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample shows how to handle Drag Drop events in TreeGrid directive to set custom conditions.</p>
                    <p><span class="initial-space"></span>In our example, orders from different customers are prevented from moving. You can only reorder orders within the same customer, but you can't move a specific order from one customer to another. You can still change the order of customers, in whole with their orders. Additonally, an order cannot become a child of another order. This is all handled by simple conditions set in event handlers for drag drop events.</p>
                    <p><span class="initial-space"></span>By dragging a specific order you may notice that mouse cursor changes, and a tooltip is shown whenever drop position is allowed.</p>
                    <p><span class="initial-space"></span>For more information check out the source code of this sample.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
